{% extends 'layout/baseSite.html' %}
{% load static %}
{% block title %}健康百科{% endblock %}
{% block title2 %}健康百科{% endblock %}
{% block birc %}健康百科{% endblock %}

{% block css %}
    <style>
        .searchBtn{
            border-radius: 5px;
            outline: none;
            border: 1px solid #ddd;
            padding: 5px 8px;
            background: #fff;
            margin-bottom: 10px;
        }
        .searchBtn:hover{
            background: #ddd;
        }
        .wrapper{
            width: 600px;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        }
        .wrapper .input-data{
            width: 100%;
            height: 40px;
            position: relative;
        }
        .wrapper .input-data input{
            width: 100%;
            height: 100%;
            border: none;
            border-bottom: 2px solid silver;
            font-size: 17px;
        }
        .input-data input:focus ~ label,
        .input-data input:valid ~ label{
            transform: translateY(-20px);
            font-size: 20px;
            color: #4158D0;
        }
        .wrapper .input-data label{
            position: absolute;
            bottom: 10px;
            left: 0;
            color: grey;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .wrapper .input-data .underline{
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 100%;
        }
        .input-data .underline:before{
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            background: #4158D0;
            transform: scaleX(0);
            transition:transform 0.3s ease;
        }

        .input-data input:focus ~ .underline:before,
        .input-data input:valid ~ .underline:before{
            transform: scaleX(1);
        }
    </style>

{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
        <div style="width: fit-content;margin: 30px auto;text-align: center;">
            <h3>欢迎来到健康百科界面</h3>
        </div>
        <div style="width: fit-content;margin: 30px auto;text-align: left;float: left;padding-left: 50px">
            <div class="row" style="width: 600px">
                <div class="col-12">
                    <div class="wrapper">
                        <div class="input-data" style="width: 500px">
                            <input type="text" required="" name="sendValue"/>
                            <div class="underline"></div>
                            <label>请输入想要查询的疾病名称：</label>
                        </div>
                        <br>
                        <button class="searchBtn">查询</button>
                    </div>
                </div>
            </div>
        <link rel="stylesheet" href="{% static 'css/disease.css' %}">
        {% if disease_info %}
            <div class="lr-container">
                    <div class="lr-container-left">
                        <div class="content">
                            <div class="content-info">
                                <div class="disease-list">
                                    <ul>
                                        <div class="tag-content ">
                                            <div class="high-light tag-content-title">
                                                {% if disease_info %}
                                                    {% for message in disease_info %}
                                                        {% if forloop.counter == 1 %}
                                                            {{ message }}
                                                        {% endif %} 
                                                    {% endfor %}
                                                {% endif %}
                                            </div>
                                            <div class="tag-content-section">就诊科室：
                                                {% if disease_info %}
                                                    {% for message in disease_info %}
                                                        {% if forloop.counter == 2 %}
                                                            {{ message }}
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                            </div>
                                        </div>
                                        <li id="0">
                                            <div class="disease-detail-card">
                                                <p class="disease-detail-card-title">简介</p>
                                                <div class="html-parse tag-html">
                                                    <h2 searchId='0-1'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        是什么？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 3 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                    <h2 searchId='0-4'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        应该去哪个科室就诊？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 2 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li id="1">
                                            <div class="disease-detail-card">
                                                <p class="disease-detail-card-title">症状</p>
                                                <div class="html-parse tag-html">
                                                    <h2 searchId='1-1'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        会有哪些症状和表现？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 4 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li id="2">
                                            <div class="disease-detail-card">
                                                <p class="disease-detail-card-title">病因</p>
                                                <div class="html-parse tag-html">
                                                    <h2 searchId='2-1'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        有哪些常见原因？</h2>
                                                    <p>

                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 5 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                    <h2 searchId='2-2'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        常见于哪些人？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 9 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li id="4">
                                            <div class="disease-detail-card">
                                                <p class="disease-detail-card-title">治疗</p>
                                                <div class="html-parse tag-html">
                                                    <h2 searchId='4-2'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        该如何治疗？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 7 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                    <h2 searchId='4-3'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        的治愈率如何？</h2>
                                                    <p>

                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 8 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                    <h2 searchId='4-4'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        的治疗时间多长？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 6 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li id="6">
                                            <div class="disease-detail-card">
                                                <p class="disease-detail-card-title">预防</p>
                                                <div class="html-parse tag-html">
                                                    <h2 searchId='6-1'>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 1 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                        该怎么预防？</h2>
                                                    <p>
                                                        {% if disease_info %}
                                                            {% for message in disease_info %}
                                                                {% if forloop.counter == 10 %}
                                                                    {{ message }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lr-container-right"></div>
                </div>
        {% endif %}
            <br>


        </div>
    </div>
    <script type="text/javascript">
      $("#baikeGo").addClass("active");

      $(".searchBtn").click(function(){
          var name = $("input[name=sendValue]").val();

          window.location.href = "/web/baike?name=" + name;
      });
    </script>
{% endblock %}
